<template>
	<div
		class="item"
		:class="isActive ? 'main-background-color1': '' "
	>
		<i class="V7_iconfont V7_iconV7tubiao_yidong move pointer"></i>
		<el-input
			class="no-border"
			v-model="item.value"
			placeholder="请输入"
		></el-input>
		<i
			class="V7_iconfont V7_iconV7tubiao_you"
			v-if="item.children && item.children.length"
		></i>
		<i
			class="V7_iconfont V7_iconV7tubiao_guanbi"
			@click.stop="deleteItem(item)"
		></i>
		<portal
			v-if="isActive"
			:to="'cascade' + (deep + 1)"
		>
			<itemList
			  :configLevel="configLevel"
				:cascade="item"
				:deep="deep + 1"
			></itemList>
		</portal>
	</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import itemList from './itemList.vue';
@Component({
  components: {}
})
export default class App extends Vue {
  @Prop({ default: 1 }) private configLevel!: number;
  @Prop() private isActive!: any;
  @Prop() private item!: any;
  @Prop({ default: 0 }) private deep!: any;
  // eslint-disable-next-line no-void
  @Prop({ default: () => void 0 }) private deleteItem!: any;
  private beforeCreate () {
    (this.$options.components as any).itemList = itemList;
  }
}
</script>

<style lang="stylus" scoped>
	.item {
		padding 0 12px
		display flex
		.V7_iconfont {
			font-size 12px
		}
		.V7_iconV7tubiao_yidong {
			margin-right 12px
			display none
		}
		.V7_iconV7tubiao_guanbi {
			display none
		}
		&.main-background-color1 {
			color #fff
			background-color: #3573f6;
			.V7_iconV7tubiao_yidong {
				display block
			}
			.V7_iconV7tubiao_you {
				display block
			}
			/deep/.el-input__inner {
				color #fff
				&::placeholder {
					color rgba(255, 255, 255, 0.25)
				}
			}
		}
		&:hover:not(.main-background-color1) {
			background-color #f5f5f5
		}
		&:hover {
			.V7_iconV7tubiao_guanbi {
				display block
			}
			.V7_iconV7tubiao_you {
				display none
			}
		}
		/deep/.el-input__inner {
			border none
			padding 0
			background-color rgba(0, 0, 0, 0)
		}
	}
</style>
